<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style-type: none;
        }
        .floor{
            width: 90%;
            margin: 0 auto;
            height: 700px;
            color: #fff;
            line-height: 700px;
            font-size: 100px;
            text-align: center;
        }
        .div1{
            background: red;
        }
        .div2{
            background: pink;
        }
        .div3{
            background: green;
        }
        .div4{
            background: blue;
        }
        .nav{
            width: 80px;
            height: 204px;
            position: fixed;
            right: 20px;
            bottom: 40px;
            background: #b6b6b6;
        }
        .nav li{
            height: 50px;
            line-height: 50px;
            text-align: center;
            font-size: 20px;
            color: #fff;
            cursor: pointer;
            border-top: 1px solid #b6b6b6;
        }
        .nav li:active{
            background: #99f;
        }
    </style>
</head>
<body>
    <ul class="nav">
        <li>div1</li>
        <li>div2</li>
        <li>div3</li>
        <li>div4</li>
    </ul>
    <div class="div1 floor">我是DIV1</div>
    <div class="div2 floor">我是DIV2</div>
    <div class="div3 floor">我是DIV3</div>
    <div class="div4 floor">我是DIV4</div>
</body>
<script src="../jquery.js"></script>
<script>
    $(".nav").children("li").click(function(){
        // 获取点击元素的索引
        // console.log($(this).index())
        // 根据索引获取到楼层元素
        // console.log($(".floor").eq($(this).index()))
        // 根据楼层元素获取距离顶部的位置
        // console.log($(".floor").eq($(this).index()).offset().top)
        // 将距离顶部的位置，设置给具有滚动条的元素的滚动距离
        // $("html").scrollTop($(".floor").eq($(this).index()).offset().top)
        // 通过动画设置
        $("html").animate({
            scrollTop:$(".floor").eq($(this).index()).offset().top
        })
    })
</script>
</html>